function openModel() {
    // public
    this.title = "开拓";
    this.divId = "openmodel";
    this.hide = function() {
        document.getElementById("openmodel").style.display="none";
    };
    this.unhide = function() {
        document.getElementById("openmodel").style.display="block";
    };


    // private
    var canvas = document.getElementById("canvas_id");

    var div = document.getElementById("div_id");
    //div.backgroundImage="timg.jpeg";
    var startDraw = 0;
    var ctx = canvas.getContext("2d");
    var width = 0;
    var height = 0;
    var img = new Image();
    var index_openModel = 0,preindex = 0;
    var time_openModel;

    canvas.width = screen.width;
    canvas.height = screen.height;
    img.src = "ui_icon_home_88.png";
    img.onload = function(){
        width = img.width/7;
        height = img.height;
        drawByIndex(0);
    }
    registeTouchEvent();

    ctx.font="20px Georgia";
    ctx.strokeText("请从图像头顶下拉来开启动画",10,30);

    function registeTouchEvent(){
        canvas.addEventListener('touchstart',touchDown);
        canvas.addEventListener('touchend',touchUp);
        canvas.addEventListener('touchmove',touchMove);
    }

    function drawByIndex(index1)
    {
        if(index1>=7){
            return;
        }
        ctx.save();
        ctx.clearRect(0,100, canvas.width, canvas.height);
        ctx.drawImage( img, width * (index1), 0, width, height, (canvas.width- width)/2, (canvas.height - height)/2, width, height );
        ctx.restore();
    }

    function touchDown(e){
        //check if in area
        var x = e.touches[0].pageX;
        var y = e.touches[0].pageY;
        var start_x = canvas.width/2 -15;
        var end_x = start_x + 30;
        var begin_y = (canvas.height - height)/2;
        var end_y = begin_y+height/7;
        if(x >=start_x && x <= end_x &&(begin_y <= y && y <= end_y) ) {
            startDraw = 1;
        }
        event.preventDefault();
    }

    function touchMove(e){
        if(0 == startDraw){
            return;
        }
        var total_height = canvas.height;
        var total_width = canvas.width;
        var x = e.touches[0].pageX;
        var y = e.touches[0].pageY;
        var get_index = getCurrentIndex(x, y);
        if(20 != get_index){
            index_openModel = get_index;
            if(index_openModel != preindex){
                preindex = index_openModel;
                drawByIndex(index_openModel);
            }
        }
    }

    function drawSubtraction(){
        /*ctx.save();
        ctx.clearRect(0,0, canvas.width, canvas.height);

        ctx.drawImage( img, width * (index_openModel), 0, width, height, (canvas.width- width)/2, (canvas.height - height)/2, width, height );
        ctx.restore();*/
        //alert("draw sub");
        drawByIndex(index_openModel);
        if(index_openModel<= 0){
            clearInterval(time_openModel);
        }else{
            index_openModel--;
        }
    }
    function animationBack(index1){
        time_openModel = window.setInterval(function() {
            //alert("draw sub");
            drawByIndex(index_openModel);
            if(index_openModel<= 0){
                clearInterval(time_openModel);
            }else{
                index_openModel--;
            }
        }, 100);//window.setInterval("drawSubtraction()",200);
    }

    function touchUp(e){
        startDraw = 0;
        preindex = 0;

        //animation back
        if(index_openModel >= 6){
            index_openModel = 6;
        }
        animationBack(index_openModel);
    }

    function getCurrentIndex(x,y){
        var length = height/7;//c.offsetHeight/7;
        var cur_index = 20;

        cur_index = parseInt(y / length);

        return cur_index;
    }
}